<script lang="ts" setup>
import { inject, useTemplateRef, ref, onUnmounted, shallowRef } from 'vue'
import { gsap } from 'gsap'
import Collapse from './collapse/index.vue'
import { getImgSrc } from '@/views/product/reno14-pro/image/3/img-src.ts'
import { useWindowResize, useGsapContext } from '@/hooks'
import { navBarHeightKey } from '@/views/product/reno14-pro/symbol-key.ts'
import { useMask, useScrollGroup } from '@/hooks/reno14-pro.ts'

const [ScrollMask] = useMask({
  maskZIndex: 25,
})
const navBarHeight = inject(navBarHeightKey)

const { scrollGroup } = useScrollGroup()

const item2ImageRef = useTemplateRef<HTMLImageElement | null>('item2ImageRef')

useGsapContext(() => {
  if (!item2ImageRef.value) {
    return
  }
  const pictureEl = item2ImageRef.value.parentNode as HTMLElement

  gsap.fromTo(
    item2ImageRef.value,
    {
      yPercent: -12,
    },
    {
      yPercent: 0,
      scrollTrigger: {
        trigger: pictureEl,
        scrub: true,
        start: () => `top bottom`,
        end: () => `bottom ${navBarHeight?.value}`,
        invalidateOnRefresh: true,
        ...scrollGroup,
      },
    },
  )
})
onUnmounted(() => {
  if (item4Tween.value) {
    item4Tween.value.revert()
  }
})

const item4ImgAreaRef = useTemplateRef<HTMLDivElement | null>('item4ImgAreaRef')
const item4MoImgRef = useTemplateRef<HTMLImageElement | null>('item4MoImgRef')
const item4PcImgRef = useTemplateRef<HTMLImageElement | null>('item4PcImgRef')
const item4Tween = shallowRef<gsap.core.Tween | null>(null)
const item4Animation = (img: HTMLImageElement) => {
  if (item4Tween.value) {
    item4Tween.value.kill()
  }
  const pictureEl = img.parentNode as HTMLElement

  item4Tween.value = gsap.fromTo(
    img,
    {
      yPercent: -10,
    },
    {
      yPercent: () => (currentMode.value === 'mo' ? 0 : 3),
      scrollTrigger: {
        trigger: pictureEl,
        scrub: true,
        start: 'top bottom',
        end: `bottom ${navBarHeight?.value}`,
        invalidateOnRefresh: true,
        ...scrollGroup,
      },
    },
  )
}

const currentMode = ref<'mo' | 'pc' | null>(null)
useWindowResize((w) => {
  if (!item4MoImgRef.value || !item4PcImgRef.value) {
    return
  }
  if (w < 1024) {
    if (currentMode.value !== 'mo') {
      item4Animation(item4MoImgRef.value)
      currentMode.value = 'mo'
    }
  } else {
    if (currentMode.value !== 'pc') {
      item4Animation(item4PcImgRef.value)
      currentMode.value = 'pc'
    }
  }
})

const item4Data = [
  {
    imgSrc: getImgSrc('images-pocket-icon-0-1.svg'),
    mainTitle: '一播到底超持久',
    subtitle: '6200mAh 耐用大电池，芯片级优化+平台级联调，保障 5 小时直播不断电。',
  },
  {
    imgSrc: getImgSrc('images-pocket-icon-1-1.svg'),
    mainTitle: '网络护航超流畅',
    subtitle: '5G n79 高速专线，直播智慧云加速，蜂窝网络卡顿率至多降低 95%。',
  },
  {
    imgSrc: getImgSrc('images-pocket-icon-2-1.svg'),
    mainTitle: '美颜上妆快又稳',
    subtitle: '疾速美颜上妆，妆效更稳定，全程不易脱。',
  },
] as const
</script>

<template>
  <ScrollMask>
    <div class="block3_container pc-container-content-1312-grid">
      <div
        class="col-start-2 text-[2.625rem] text-center leading-[1.1] lg:text-[clamp(2.625rem,-0.625rem+5.0781vw,4.25rem)]"
      >
        <p>一站式直播神器</p>
        <p>
          抬手就开播
          <br class="sm:hidden" />
          超稳超清晰
        </p>
        <p
          class="text-sm mt-[0.75rem] leading-[1.7] sm:max-w-[29.25rem] mx-auto lg:text-[clamp(0.875rem,0.125rem+1.1719vw,1.25rem)] lg:max-w-[55%]"
        >
          音画、续航和稳定性全面进化，还联袂 20000mAh
          移动电源、直播散热背夹。全明星装备成团出道，一个人就是一个直播团队。
        </p>
      </div>

      <div
        class="col-span-full w-full mt-[21vw] h-[60.5vw] sm:mt-[10.15vw] sm:h-[40.88vw] lg:mt-[5rem]"
      >
        <picture class="_picture2 block overflow-hidden h-full w-full">
          <source
            media="(min-width: 1536px)"
            srcset="@/views/product/reno14-pro/image/3/images-pocket-bg.jpg"
          />
          <source
            media="(min-width: 1024px)"
            srcset="@/views/product/reno14-pro/image/3/images-pocket-bg.jpg"
          />
          <source
            media="(min-width: 640px)"
            srcset="@/views/product/reno14-pro/image/3/images-pocket-bg-pad-1.jpg.webp"
          />
          <img
            ref="item2ImageRef"
            class="w-full h-[120%] object-cover"
            src="@/views/product/reno14-pro/image/3/images-pocket-bg-mo-1.jpg.webp"
            alt=""
            loading="lazy"
          />
        </picture>
      </div>

      <Collapse />

      <div class="content4">
        <div
          class="text-3xl mb-[7vw] sm:mb-[1.375rem] lg:mb-[2.5rem] lg:text-[clamp(1.875rem,-0.375rem+3.5156vw,3rem)]"
        >
          <p>超持久稳定直播</p>
          <p>5 小时蓝光流畅直播</p>
        </div>

        <div ref="item4ImgAreaRef">
          <picture class="lg:hidden block h-[61.62vw] overflow-hidden sm:h-[40.88vw]">
            <source
              media="(min-width: 640px)"
              srcset="@/views/product/reno14-pro/image/3/images-pocket-keep-pad-1.jpg.webp"
            />
            <img
              ref="item4MoImgRef"
              class="w-full h-[120%] object-cover"
              src="@/views/product/reno14-pro/image/3/images-pocket-keep-mo-1.jpg.webp"
              alt=""
              loading="lazy"
            />
          </picture>

          <div class="item3">
            <picture class="hidden lg:block h-[clamp(28rem,6.5rem+33.5938vw,38.75rem)]">
              <source
                media="(min-width: 1536px)"
                srcset="@/views/product/reno14-pro/image/3/images-pocket-keep-1.jpg.webp"
              />
              <img
                ref="item4PcImgRef"
                class="w-full h-[110%] object-cover"
                src="@/views/product/reno14-pro/image/3/images-pocket-keep-d7111.jpg.webp"
                alt=""
                loading="lazy"
              />
            </picture>

            <div class="list-area">
              <div
                v-for="(item, k) in item4Data"
                :key="k"
                class="flex gap-[1.25rem] p-[4.65vw] max-md:mt-[1.16vw] bg-[#f6f6f6] _rounded md:p-[1.25rem] md:mt-[0.5rem] lg:m-0 lg:items-start lg:bg-[rgb(255_255_255/80%)]"
              >
                <img :src="item.imgSrc" alt="" class="w-[2.625rem] aspect-square" loading="lazy" />
                <div>
                  <p class="text-base lg:text-[clamp(1rem,0rem+1.5625vw,1.5rem)]">
                    {{ item.mainTitle }}
                  </p>
                  <p
                    class="text-xs opacity-55 mt-[0.375rem] lg:text-[clamp(0.75rem,0.25rem+0.7813vw,1rem)]"
                  >
                    {{ item.subtitle }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ScrollMask>
</template>

<style scoped>
@reference "@/assets/main.css";

.block3_container {
  @apply relative z-20 bg-white rounded-t-4xl pt-[21vw] pb-[14vw]

  md:py-[10.15vw]

  lg:pt-[11.5rem] lg:pb-[5rem];

  .content4 {
    @apply col-start-2 mt-[13.48vw] md:mt-[9.63vw] lg:mt-[5rem];

    .item3 {
      @apply relative overflow-hidden;
      .list-area {
        @apply md:grid md:grid-cols-3 md:gap-[0.25rem]
        lg:absolute lg:bottom-0 lg:left-0 lg:p-[clamp(1.25rem,0.75rem+0.7813vw,1.5rem)]
        lg:gap-[clamp(0.25rem,-0.25rem+0.7813vw,0.5rem)];
        & > div:last-child img {
          @apply max-sm:translate-x-[4px];
        }
      }
    }
  }
}
</style>
